<template>
  <!--路由组件出口的位置-->
  <router-view v-slot="{Component}">
    <transition name="fade">
      <!--设置过度动画-->
      <!-- 渲染home组件一级路由的子路由 -->
      <component :is="Component" :v-if="flag"></component>
    </transition>
  </router-view>

</template>

<script setup lang="ts">
//@ts-ignore
import useLayOutSettingStore from "@/piniaStore/moudules/settingStore.ts";
import {nextTick, ref, watch} from "vue";


let flag = ref(true);//控制组件是否需要销毁重建
let layoutSettingStore = useLayOutSettingStore();

//监听仓库内部数据是否发生变化，如果变化发生 说明用户点击刷新按扭
watch(() => layoutSettingStore.refresh, () => {

//点击刷新按扭，路由组件需要销毁
  flag.value = false;
  nextTick(() => {
    flag.value = true;
  })
})

</script>

<style scoped>
.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}

.fade-enter-active {
  transition: all .3s;

}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>